<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--定义搜索框-->
    <el-row>
        <el-form :inline="true" :model="serachStu" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="serachStu.username" placeholder="请输入搜索名字..."></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="serachStu.status" placeholder="请选择学生状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="reset" icon="el-icon-refresh">重置条件</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--操作按钮-->
    <el-row>
        <el-button type="danger" icon="el-icon-delete-solid" @click="batchDelete()">批量删除</el-button>
        <el-button type="primary" icon="el-icon-delete-solid" @click="addData()">新增数据</el-button>
    </el-row>
    <!--表格-->
    <el-table
            height="450px"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
        <!--多选-->
        <el-table-column
                type="selection"
                width="55"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="id"
                label="学号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper,->,total"
            :total="400">
    </el-pagination>

</div>

</body>
</html>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                serachStu: {
                    username: '',
                    status: ''
                },
                tableData: [
                    {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }, {
                        id:1,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    },
                    {
                        id:2,
                        username:'王小虎',
                        password:'123456',
                        age:18,
                        phone:'1357773331',
                        status:1
                    }
                ],
                multipleSelection: [],
                currentPage: 1
            }
        },
        methods:{
            //表格顔色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if(rowIndex % 3 === 0) {
                    return 'success-row';
                }
                return '';
            },
            //搜索框搜索的函数
            onSubmit() {
                console.log('submit!');
            },
            //重置搜索条件的函数
            reset(){
               this.serachStu={}//清空存储的数据模型
            },
            //批量删除按钮
            batchDelete(){},
            //新增按钮
            addData(){},
            //编辑按钮
            handleEdit(row) {
                console.log(row);
            },
            //删除按钮
            handleDelete(row) {
                console.log(row);
            },
            //多选操作
            handleSelectionChange(val) {
                //每选择一个就会在数组中添加一个对象
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            }
        }
    });
</script>